<template>
  <div class="in">
    <div class="shang">
      <div class="tou">
        <span>宏烨经纪人</span>
        <span>
          
        </span>
      </div>
      <div class="xin">
        <div class="im">
          <img :src="state.imgs" alt />
        </div>
        <p>{{state.name}}</p>
      </div>
    </div>
    <div class="xia">
      <div class="fu">
        <router-link class="lis" v-for="(item,ind) in state.data" :key="ind" :to="item.path">
          <div class="p">{{item.names}}</div>
          <div class="sp">{{item.name}}</div>
        </router-link>
        <!-- <router-link to="/esf" class="lis">
          <div class="p">188</div>
          <div class="sp">二手房</div>
        </router-link>
        <router-link to="/chuz" class="lis">
          <div class="p">188</div>
          <div class="sp">出租房</div>
        </router-link> -->
      </div>
      <div class="lie">
        <router-link to="/xiao">
          <van-icon name="star-o" />
          <p>消息</p>
        </router-link>
        <router-link to="/zu">
          <van-icon name="wap-home-o" />
          <p>求租</p>
        </router-link>
        <router-link to="/gou">
          <van-icon name="setting-o" />
          <p>求购</p>
        </router-link>
        <router-link to="/lou">
          <van-icon name="video-o" />
          <p>楼市圈</p>
        </router-link>
        <router-link to="/bo">
          <van-icon name="gem-o" />
          <p>直播</p>
        </router-link>
        <router-link to="/tuangou">
          <van-icon name="browsing-history-o" />
          <p>团购</p>
        </router-link>
        <router-link to="/pai">
          <van-icon name="service-o" />
          <p>排行榜</p>
        </router-link>
        <router-link to="/zhan">
          <van-icon name="point-gift-o" />
          <p>战绩</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, onUpdated } from "vue";
import { useRoute } from "vue-router";
import axios from "../axios/index"
export default defineComponent({
  setup() {
    const route = useRoute();
    let state = reactive({
      imgs: "https://api-haoke-web.itheima.net/img/profile/avatar.png",
      name: "未登录",
      data:[]
    });
    const getIndex = () => {
      const info = route.query;
      state.imgs = JSON.parse(window.localStorage.getItem('info')).imgs;
      state.name = JSON.parse(window.localStorage.getItem('info')).name;
    };
    axios.get("/homes").then(res=>{
      // console.log(res)
      state.data=res.data.header
    })
    getIndex()
    return {
      state
    };
  }
});
</script>
<style lang="scss" scoped>
.in {
  width: 100%;
  height: 100%;
}
.shang {
  width: 100%;
  height: 250px;
  background: #1887f6;
}
.tou {
  height: 50px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  align-items: center;
  span {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.xin {
  height: 200px;
  text-align: center;
}
.im {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
}
.im img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.xin p {
  margin: 10px 0;
  color: #fff;
}
.xia {
  width: 100%;
  height: auto;
}
.fu {
  margin-top: -50px;
  width: 95%;
  margin: -50px auto;
  height: 100px;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 3px #292929;
  -moz-box-shadow: 1px 1px 3px #292929;
  box-shadow: 1px 1px 3px #292929;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lis {
  width: 30%;
  height: 80px;
  text-align: center;
  line-height: 40px;
}
.lis a {
  color: #000;
}
.p {
  font-size: 25px;
  color: #1FB0FF;
}
.sp {
  color: #000;
  font-size: 15px;
}
.lie {
  width: 100%;
  margin-top: 70px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.lie a {
  font-size: 15px;
  color: #000;
  width: 33%;
  height: 100px;
}
.lie a i {
  font-size: 25px;
}
</style>
